import type { TableColumn } from '@/components/core/dynamic-table';
import { Tag, Tooltip } from 'ant-design-vue';
import { selectDictLabel } from '@/utils/telchina';
import { reactive } from 'vue';
import { formatDept2Tree } from '@/core/permission/utils';
import { getDeptList } from '@/api/system/dept';

// 当前页面使用的数据
export const pageDataObj = reactive({
  workOrderTypeDict: [],
  industryTypeDict: [],
  regionDict: [],
  infoSerrcesTypeDict: [],
  responsibleUnitDict: [],
  workOrderStatus: [],
  areaDict:[],
});
export type TableColumnItem = TableColumn;

export const baseColumns: TableColumnItem[] = [
  {
    title: '工单编号',
    key: 'workOrderNumber',
    dataIndex: 'workOrderNumber',
    align: 'center',
    width: '120px',
    fixed: 'left',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '紧急程度',
    key: 'urgency',
    dataIndex: 'urgency',
    align: 'center',
    fixed: 'left',
    customRender: ({ record }) => {
      const isEnable = record.urgency == 0;
      return <Tag color={isEnable ? 'success' : 'red'}> {isEnable ? '一般' : '紧急'}</Tag>;
    },
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '一般',
            value: '0',
          },
          {
            label: '紧急',
            value: '2',
          },
        ],
      },
    },
  },
  {
    title: '工单状态',
    key: 'workOrderStatus',
    fixed: 'left',
    dataIndex: 'workOrderStatus',
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.workOrderStatus, record.workOrderStatus);
    },
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
    },
  },
  {
    title: '问题描述',
    key: 'problemDesc',
    dataIndex: 'problemDesc',
    align: 'center',
    hideInSearch: true,
    width: 300,
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.problemDesc}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.problemDesc}
          </div>
        </Tooltip>
      );
    },
  },
  {
    title: '所在区域',
    key: 'regions',
    dataIndex: 'regions',
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.regionDict, record.region);
    },
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
      componentProps:{
        mode: 'multiple',
      }
    },
  },

  {
    title: '责任单位',
    key: 'responsibleUnits',
    dataIndex: 'responsibleUnit',
    align: 'center',
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'TreeSelect',
      componentProps: {
        multiple: true,
        request: async () => {
          return formatDept2Tree(await getDeptList());
        },
      },
    },
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.responsibleUnitDict, record.responsibleUnit);
    },
  },
  {
    title: '工单类型',
    key: 'workOrderTypes',
    dataIndex: 'workOrderType',
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.workOrderTypeDict, record.workOrderType);
    },
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
      componentProps: {
        options: pageDataObj.workOrderTypeDict,
        mode: 'multiple',
      },
    },
  },
  {
    title: '行业类型',
    key: 'industryTypes',
    dataIndex: 'industryType',
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.industryTypeDict, record.industryType);
    },
    formItemProps: {
      component: 'TreeSelect',
      colProps: {
        span: 6,
      },
      componentProps:{
        multiple: true,
      }
    },
  },
  {
    title: '是否回访',
    key: 'returnVisit',
    dataIndex: 'returnVisit',
    align: 'center',
    width: 80,
    formItemProps: {
      colProps: {
        span: 6,
      },
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '是',
            value: '1',
          },
          {
            label: '否',
            value: '2',
          },
        ],
      },
    },
    customRender: ({ record }) => {
      const isEnable = record.returnVisit == 1;
      return isEnable ? '是' : '否';
    },
  },
  {
    title: '报案联系人',
    key: 'contacts',
    dataIndex: 'contacts',
    align: 'center',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '联系方式',
    key: 'contactsInfo',
    dataIndex: 'contactsInfo',
    width: 120,
    align: 'center',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '处理期限',
    key: 'processingPeriod',
    dataIndex: 'processingPeriod',
    align: 'center',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '受理工号',
    key: 'acceptNumber',
    dataIndex: 'acceptNumber',
    align: 'center',
    width: '100px',
    formItemProps: {
      colProps: {
        span: 6,
      },
    },
  },
  {
    title: '受理时间',
    key: 'acceptTime',
    dataIndex: 'acceptTime',
    align: 'center',
    width: '180px',
    formItemProps: {
      component: 'RangePicker',
      colProps: {
        span: 6,
      },
      componentProps: {
        showTime: true,
      },
    },
  },
];

export const incomingCallsColumns: TableColumnItem[] = [
  {
    title: '联系方式',
    key: 'callerNumber',
    dataIndex: 'callerNumber',
    width: 120,
    align: 'center',
    hideInTable: false,
    formItemProps: {
      colProps: {
        span: 12,
      },
    },
  },
  {
    title: '行业类型',
    key: 'industryType',
    dataIndex: 'industryType',
    align: 'center',
    hideInTable: true,
    formItemProps: {
      component: 'TreeSelect',
      colProps: {
        span: 12,
      },
    },
  },
  {
    title: '责任单位',
    key: 'responsibleUnit',
    dataIndex: 'responsibleUnit',
    hideInTable: true,
    align: 'center',
    formItemProps: {
      component: 'TreeSelect',
      colProps: {
        span: 12,
      },
      componentProps: {
        request: async () => {
          return formatDept2Tree(await getDeptList());
        },
      },
    },
  },
  {
    title: '来电时间',
    key: 'acceptTime',
    dataIndex: 'acceptTime',
    align: 'center',
    width: '180px',
    formItemProps: {
      label: '查询时间',
      component: 'RangePicker',
      colProps: {
        span: 12,
      },
      componentProps: {
        showTime: true,
      },
    },
  },
  {
    title: '工单编号',
    key: 'workOrderNumber',
    dataIndex: 'workOrderNumber',
    hideInSearch: true,
    align: 'center',
    width: '120px',
  },
  {
    title: '问题描述',
    key: 'problemDesc',
    dataIndex: 'problemDesc',
    align: 'center',
    hideInSearch: true,
    width: 300,
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.problemDesc}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.problemDesc}
          </div>
        </Tooltip>
      );
    },
  },
];

export const addressQueryColumns: TableColumnItem[] = [
  {
    title: '工单编号',
    key: 'workOrderNumber',
    dataIndex: 'workOrderNumber',
    hideInSearch: true,
    align: 'center',
    width: 120,
  },
  {
    title: '行业类型',
    key: 'industryType',
    dataIndex: 'industryType',
    hideInSearch: true,
    width: 150,
    align: 'center',
    customRender: ({ record }) => {
      return selectDictLabel(pageDataObj.industryTypeDict, record.industryType);
    },
  },
  {
    title: '发生地址',
    key: 'occAddress',
    dataIndex: 'occAddress',
    align: 'center',
    width: 300,
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.occAddress}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.occAddress}
          </div>
        </Tooltip>
      );
    },
    formItemProps: {
      colProps: {
        span: 8,
      },
    },
  },
  {
    title: '联系人',
    key: 'contacts',
    dataIndex: 'contacts',
    hideInSearch: true,
    align: 'center',
    width: 80,
  },
  {
    title: '受理时间',
    key: 'acceptTime',
    dataIndex: 'acceptTime',
    align: 'center',
    width: 160,
    formItemProps: {
      label: '受理时间',
      component: 'RangePicker',
      colProps: {
        span: 10,
      },
      componentProps: {
        showTime: true,
      },
    },
  },
];
